<template>
  <div class="all">
    <header>
      <div class="div" @click="back">
        <img src="../../assets/返回.png" alt="">
        <span class="solt">返回</span>
      </div>
      <div class="div">
        <span>查看资料</span>
      </div>
      <div class="div">
      </div>
    </header>
    <div class="content">
      <div class="title">
        <ul>
          <li>情况说明</li>
          <li>{{data.answer.desc}}</li>
        </ul>
      </div>
      <div  class="zlMenu" >
        <div>
          <a></a>
          <span>针对项目</span>
        </div>
        <div style="width: 70%">
          <span style="
              margin-right: 8px;
              font-size: 15px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #999999;
              display: inline-block;
              white-space: nowrap;
              width: 100%;
              overflow: hidden;
              text-overflow:ellipsis;
              text-align: right
              ">{{this.$route.query.title}}</span>
          <img src="../../assets/下弹灰@2x.png"  alt="">
        </div>
      </div>
      <div   class="video">
        <div class="videoMenu">
          <li class="videoMenu_left">
            <a></a>
            <span>上传影像资料</span>
          </li>
          <li>
            {{videoList.length}}/1
          </li>
        </div>
        <div class="videoUpload" >
            <van-uploader v-show="videoList.length>0"
                          v-model="videoList"
                          upload-icon="plus"
                          multiple
                          accept="video/*, .mp4"
                          :max-count="1" />
        </div>
      </div>
      <div class="IMG">
        <div class="imgMenu">
          <li class="imgMenu_left">
            <a></a>
            <span>上传图片资料</span>
          </li>
          <li>
            不限
          </li>
        </div>
        <div class="videoUpload">
          <img @click="show = true" v-for="(item, index) in imgList" :key="index" :src="item" alt="">
        </div>
      </div>
    </div>
    <van-image-preview v-model="show" :images="images" @change="onChange">
      <template v-slot:index>第{{ index + 1 }}页</template>
    </van-image-preview>
  </div>
</template>

<script>
export default {
  name: 'ImgShow',
  data () {
    return {
      data: JSON.parse(sessionStorage.getItem('data')),
      imgList: [],
      videoList: [],
      show: false,
      index: 0,
      images: []
    }
  },
  mounted () {
    var _this = this
    this.data.answer.files.forEach(function (current, index, arr) {
      console.log(current)
      if (current.type === 2) {
        _this.videoList.push(current.url)
      } else if (current.type === 1) {
        _this.imgList.push(current.url)
        _this.images.push(current.url)
      }
    })
  },
  methods: {
    onChange (index) {
      this.index = index
    },
    PlayVideo () {
      if (this.videoList.length > 0) {
        window.location.href = this.videoList
      }
    },
    // 点击返回
    back () {
      sessionStorage.removeItem('data')
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
  .all{
    width: 100vw;
    height: 100vh;
    background: #FAF9FE;
  }
  header{
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #E5E5E5;
    background: white;
  }
  .div{
    width: 40%;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: bold;
    font-family: "PingFang SC";
  }
  .solt{
    color: #1DA4F2;
  }
  .div:nth-child(2){
    justify-content: center;
  }
  .div:first-child,
  .div:last-child{
    width: 30% !important;
  }
  .div:first-child img{
    width: 7px;
    height: 13px;
    margin: 0 5px 0 15px;
  }
  .title{
    width: 100%;
    height: 85px;
    margin: 0 auto;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .title ul{
    width: 92%;
    margin: 0 auto;
    height: 75px;
    border-radius: 10px;
    border: 1px solid rgba(29, 164, 242, 0.1);
    overflow: hidden;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 500;
    display: flex;
  }
  .title ul li:first-child{
    width: 25%;
    height: 100%;
    background: rgba(29, 164, 242, 0.1);
    color: #1DA4F2;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .title ul li:last-child{
    width: 70%;
    padding: 10px;
    box-sizing: border-box;
    overflow: auto;
  }
  .video img,
  .IMG img{
    width: 21.5vw;
    height: 21.5vw;
    margin-right: 5px;
  }
  .video li,
  .IMG li{
    list-style: none;
  }
  .zlMenu,
  .videoMenu,
  .imgMenu{
    width: 100%;
    height: 44px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    font-size: 15px;
  }
  .zlMenu a,
  .videoMenu_left a,
  .imgMenu a
  {
    width: 2px;
    height: 15px;
    background: #1da4f2;
    margin: 0 5px 0 15px;
    display: block;
  }
  .videoMenu,
  .imgMenu
  {
    justify-content: space-between;
    margin-top: 5px;
  }
  .videoMenu li:last-child,
  .imgMenu li:last-child
  {
    margin-right: 15px;
    color: #999999;
  }
  .videoMenu_left,
  .imgMenu_left
  {
    width: 50%;
    display: flex;
    align-items: center;
  }
  .videoMenu_left a,
  .imgMenu a
  {
    display: block;
  }
  .videoUpload{
    width: 100%;
    background: #FFFFFF;
    padding: 0 10px;
    box-sizing: border-box;
  }
  .zlMenu{
    display: flex;
    justify-content: space-between;
  }
  .zlMenu div{
    display: flex;
    align-items: center;
  }
  .zlMenu div:nth-child(2) img{
    width: 13px;
    height: 7px;
    margin-right: 15px;
  }
</style>
